<%@ include file="includes/include.jsp" %>

<jsp:include page="includes/header.jsp">
  <jsp:param name="pageTitle" value="About" />
</jsp:include>

<style type="text/css">
  a, h2 {
    color: #009900
  }
  table img {
    border: solid gray 1px;
  }
  .pulse-stat {
    float: left;
    margin-bottom: 25px;
    margin-right: 25px;
  }
  .pulse-stat h4 {
    border: none;
    color: #333;
    padding: 0px;
    font-size: 17px;
  }
  .pulse-stat h5 {
    color: #666;
    font-size: 12px;
  }
  .pulse-stat ol {
    margin: 0px;
  }
  .pulse-stat-heading {
      border-bottom: solid #DDD 1px;
      margin-bottom: 15px;
      padding-bottom: 3px;
  }
  .pulse-stat-value {
      color: #999;
      font-size: 100px;
      font-weight: 700;
      margin-top: -15px;
      text-align: center;
      background-color: #EEE;
      line-height: 1.2em;
      border-bottom: 1px #DDD solid;
  }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/static/json2.js"></script>
<script type="text/javascript">
  var gtugs = {
    map: null,
    activeInfoWindow: null,
      GTUG_MARKER_ACTIVE: '/static/gtugmarker_active.png',
      GTUG_MARKER_INCUBATING: '/static/gtugmarker_incubating.png',
    MARKER_SHADOW: '/static/markershadow.png'
  };

  window.onload = function() {
    gtugs.map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(14, 0),
        zoom: 2,
        mapTypeControl: false,
        scrollwheel: false
    });

    new core.AjaxRequest('GET', '/chapters', function(json) {
        var chapters = JSON.parse(json).chapters;
        for (var i = 0; i < chapters.length; i++) {
          var chapter = chapters[i];

          var coordinates = new google.maps.LatLng(chapter.latitude,
              chapter.longitude);
          var shadow = new google.maps.MarkerImage(gtugs.MARKER_SHADOW,
              new google.maps.Size(37, 34), new google.maps.Point(0,0),
              new google.maps.Point(9, 34));

          var icon = (chapter.status == 'active' ? gtugs.GTUG_MARKER_ACTIVE : gtugs.GTUG_MARKER_INCUBATING);

          var marker = new google.maps.Marker({
              map: gtugs.map,
              title: chapter.name,
              position: coordinates,
              icon: icon,
              shadow: shadow
          });

          var html = [];
          html.push('<div style="border-bottom:solid black 1px; font-size:14px; font-weight:bold">');
          html.push(chapter.name);
          html.push('</div><div style="font-size:12px">Status: <em>');
          html.push(chapter.status);
          html.push('</em></div><ul><li><a href="/chapter.jsp?id=');
          html.push(chapter.id);
          html.push('">Chapter profile</a></li>');
          if (chapter.website != null) {
            html.push('<li><a href="');
            html.push(chapter.website);
            html.push('">Website</a></li>');
          }
          html.push('</ul>');
          var infoWindow = new google.maps.InfoWindow({
              content: html.join('')
          })

          google.maps.event.addListener(marker, 'click',
              gtugs.openInfoWindow(infoWindow, marker));
        }
      }).send();
  };

  gtugs.openInfoWindow = function(infoWindow, marker) {
    return function() {
      if (gtugs.activeInfoWindow != null) {
        gtugs.activeInfoWindow.close();
      }

      infoWindow.open(gtugs.map, marker);
      gtugs.activeInfoWindow = infoWindow;
    };
  }
</script>


<h3>What is a GTUG?</h3>

<p>Google Technology User Groups (GTUGs) are user groups for people who are interested in
    Google&#39;s developer technology; everything from the Android and App Engine platforms, to
    product APIs like the YouTube API and the Google Calendar API, to initiatives like OpenSocial.
    Check out <a href="http://code.google.com">code.google.com</a> for the full list of offerings.
</p>

<p>A GTUG can take many forms &mdash; from just a few people getting together to watch our latest
    <a href="http://www.youtube.com/user/GoogleDevelopers">video</a>, to large gatherings with
    demos and lectures, to events like code sprints and hackathons.
</p>

<p>
<div style="text-align:center">
<table style="width:100%" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <img src="/static/P1010041_small.jpg" />
    </td>
    <td>
      <img src="/static/2009-05-26_19.14.19_small.jpg" />
    </td>
    <td>
      <img src="/static/HK_GTUG_1200_small.jpg" />
    </td>
    <td>
      <img src="/static/IMG_2505_small.jpg" />
    </td>
    <td>
      <img src="/static/SV-GTUG-July2009_0011_small.jpg" />
    </td>
  </tr>
</table>
</div>
</p>

<h3>What now?</h3>

<ul>
  <li>Visit the <a href="/directory">directory</a> to see if there's a local meetup in your area.
      Feel free to contact the organizers to find out more. If there's no chapter near you, consider
      <a href="http://wiki.gtugs.org/so-you-want-to-start-a-gtug">starting one</a>!
  </li>
  <li>Check out our <a href="http://www.youtube.com/user/gtugs">YouTube channel</a> for videos of
      past sessions.
  </li>
</ul>

<div class="pulse-stat" style="width:283px">
  <div class="pulse-stat-heading">
    <h4>GTUG Chapters <span style="color: #666; font-weight: 300;">- Active + Incubating</span></h4>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numChapters}"/>
  </div>
</div>

<div class="pulse-stat" style="width:283px">
  <div class="pulse-stat-heading">
    <h4>Countries <span style="color: #666; font-weight: 300;">- With GTUG Chapters</span></h4>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numCountries}"/>
  </div>
</div>

<div class="pulse-stat" style="width:283px; margin-right:0px">
  <div class="pulse-stat-heading">
    <h4>GTUG Events <span style="color: #666; font-weight: 300;">- In the past six months</span></h4>
  </div>
  <div class="pulse-stat-value">
    <c:out value="${model.stats.numEvents}"/>
  </div>
</div>

<br style="clear:both"/>

<div id="map" style="border:solid #0566cc 1px; height:330px; width:100%"></div>

<%@ include file="includes/footer.jsp" %>